<script setup>
import { ref, reactive } from 'vue'
import { getProduct, getDeviceType } from '@/assets/api/device'
import { showMsg } from '@/assets/js/utils'
import { useUserStore } from '@/stores/index'
import config from '@/assets/js/config'
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    deviceClassId: {
        type: String,
        default: '',
    },
    deviceClassify: {
        type: String,
        default: '',
    },
})
const emits = defineEmits(['update:visible', 'success'])
function closeAction() {
    emits('update:visible', false)
}
const productList = ref([])
const typeList = ref([])
function getData() {
    const { deviceClassId } = props
    getProduct({ deviceClassId }).then((res) => {
        productList.value = res.data
    })
    getDeviceType({ deviceClassId }).then((res) => {
        typeList.value = res.data
    })
}
getData()

const uploadRef = ref()
const uploadUrl = config.baseApi + '/upload/deviceUpload'
const userStore = useUserStore()
const uploadHeaders = reactive({
    Authorization: 'Bearer ' + userStore.token,
})
const uploadParams = reactive({
    productId: '',
    deviceType: '',
    deviceClass: props.deviceClassId,
    deviceClassify: props.deviceClassify,
    is_children: route.query.number ? 1 : 2,
})
uploadParams.trans_device_code = route.query.number
const importFormRef = ref()
const submitUpload = () => {
    importFormRef.value.validate((valid, fields) => {
        if (valid) {
            if (uploadFileList.value.length == 0) {
                showMsg('请上传文件', 'error')
                return
            }
            uploadRef.value.submit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const uploadFileList = ref([])
function onFileChange(uploadFile, uploadFiles) {
    console.log('onFileChange', uploadFile, uploadFiles)
    uploadFileList.value = uploadFiles
}
function onFileRemove(uploadFile, uploadFiles) {
    console.log('onFileRemove', uploadFile, uploadFiles)
    uploadFileList.value = uploadFiles
}

// 导入成功
function importSuccess(res) {
    if (res.code == 1) {
        showMsg(res.msg, 'error')
        return
    }
    showMsg('导入成功')
    emits('success')
    closeAction()
    // let resData = JSON.parse(res.data)
    // if (resData.webPath) {
    //     window.open(
    //         config.baseApi + '/upload/deviceUpload?fileName=' + resData.webPath
    //     )
    // } else {
    //     showMsg('导入成功')
    //     emits('success')
    //     closeAction()
    // }
}
// 导入失败
function importError(err, file, fileList) {
    console.log(err, file, fileList)
    showMsg('导入失败', 'error')
    // window.open(config.baseApi + '/uploadFile/downloadExcel')
}
</script>
<template>
    <el-dialog
        :model-value="visible"
        title="导入设备"
        width="600px"
        :draggable="true"
        @close="closeAction"
    >
        <el-form ref="importFormRef" :model="uploadParams" label-width="120px">
            <el-form-item
                label="设备类型："
                prop="deviceType"
                :rules="[
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change',
                    },
                ]"
            >
                <el-select
                    class="full"
                    v-model="uploadParams.deviceType"
                    placeholder="请选择"
                >
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="(item, key) in typeList"
                        :key="key"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                label="产品："
                prop="productId"
                :rules="[
                    {
                        required: true,
                        message: '请选择产品',
                        trigger: 'change',
                    },
                ]"
            >
                <el-select
                    class="full"
                    v-model="uploadParams.productId"
                    placeholder="请选择"
                >
                    <el-option
                        :label="item.name"
                        :value="item.id"
                        v-for="(item, key) in productList"
                        :key="key"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上传文件：">
                <el-upload
                    ref="uploadRef"
                    :action="uploadUrl"
                    :limit="1"
                    accept=".xlsx"
                    :data="uploadParams"
                    :show-file-list="true"
                    :on-success="importSuccess"
                    :on-error="importError"
                    :on-change="onFileChange"
                    :on-remove="onFileRemove"
                    :auto-upload="false"
                    :headers="uploadHeaders"
                >
                    <el-button class="ml-10" type="primary">上传</el-button>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAction">取消</el-button>
                <el-button type="primary" @click="submitUpload">
                    导入
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped></style>
